<template>
    <div class="merchandise-management views-container">
    <div class="wlm-table">
      <div class="wlm-table-header">
            <el-form :model="tableFormatData.Details.files"  size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="订单号：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.Details.files.order_no" placeholder="请输入订单编号" style="width:160px;"></el-input>

                    </el-form-item>
                    <el-form-item label="用户昵称：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.Details.files.nickName" placeholder="请输入用户昵称" style="width:160px;"></el-input>
                    </el-form-item>
                      <el-form-item label="状态：">
                         <el-select v-model="tableFormatData.Details.files.status" placeholder="请选择">
                            <el-option
                            v-for="item in [{ value: '2',label: '成功'},{value: '1',label: '进行中'}]"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
              <!--  -->
             <el-table :ref="tableFormatData.Details.key"
                :data="tableFormatData.Details.tableData"
                @selection-change="handleSelectionChange"
                style="width:100%"
                >
                <el-table-column label="订单编号"  >
                    <template slot-scope="scope">
                        <span>{{scope.row.order_no}}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="用户信息"  >
                  <template slot-scope="scope">
                       <div class="wlm-table-logos">
                                  <div style="display:flex;">
                                        <img
                                            class="logo"
                                            :src="scope.row.avatarUrl"
                                            >
                                         <div style="margin-left:10px;">
                                                <!-- <div style="font-size:12px">{{scope.row.user_id}}</div> -->
                                            <span style="font-size:12px">{{scope.row.nickName}}</span>
                                         </div>
                                  </div>
                                </div>
                  </template>
                </el-table-column>
                 <el-table-column label="购买商品"  >
                   <template slot-scope="scope">
                        <span>{{scope.row.goods_name}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="支付金额"  >
                  
                   <template slot-scope="scope">
                        <span>{{scope.row.total_price}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="已返金额"  >
                  <template slot-scope="scope">
                        <span>{{scope.row.return_money}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="购买时间"  >
                  
                  <template slot-scope="scope">
                        <span>{{scope.row.create_time}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="状态"  >
                      <template slot-scope="scope">
                        <span v-if="scope.row.status==1">进行中</span>
                        <span v-if="scope.row.status==2">已免单</span>
                    </template>
                </el-table-column>
                 <el-table-column label="操作"  >
                    <template slot-scope="scope">
                            <router-link class="wlm-text" tag="span" :to="{path:'/application/freeoHelp', query:{order_id:scope.row.order_id}}">
                                         <el-button class="wlm-text" type="text" >助力详情</el-button>
                                </router-link>
                    </template>
                </el-table-column>
             </el-table>
             <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData. Details.pagination.page"
            :page-sizes="tableFormatData. Details.pagination.pagesizes"
            :page-size.sync="tableFormatData. Details.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData. Details.pagination.total : 0"
          ></el-pagination>
        </div>
        </div>
    </div>
    </div>

</template>
<script>
import{participateFreeOrder} from "@/api/freeofcharge";
import mixins from "@/mixins/mixins";
export default {
     mixins: [mixins.getters("Table")],
     name: "Details",
     data(){
         return{
             tableFormatData: {
        current: "Details",
        Details: {
          key: "Details",
          api: {
            getList: participateFreeOrder,
          },
          tableData: [],
          goods: [],
          files: {
            ids:[],
          },
      
          pagination: {
            status:'',
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0,
          },
        },
      }, 
         }
     },
     methods:{
         
     },
}
</script>
<style>

</style>